import React, { useState } from 'react'
import { View, Video, Image, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './SingleVideoUploader.scss'
import Add from '@/assets/plus/add.png'
interface SingleVideoUploaderProps {
  value?: string
  onChange?: (videoUrl: string | null) => void
}

const SingleVideoUploader: React.FC<SingleVideoUploaderProps> = ({
                                                                   value,
                                                                   onChange,
                                                                 }) => {
  const [videoUrl, setVideoUrl] = useState<string | null>(value || null)

  const chooseVideo = () => {
    Taro.chooseVideo({
      sourceType: ['album', 'camera'],
      maxDuration: 60,
      compressed: true,
      success: (res) => {
        setVideoUrl(res.tempFilePath)
        onChange?.(res.tempFilePath)
      },
    })
  }

  const deleteVideo = () => {
    setVideoUrl(null)
    onChange?.(null)
  }

  return (
    <View className="single-video-uploader">
      {videoUrl ? (
        <View className="video-wrapper">
          <Video
            className="video"
            src={videoUrl}
            controls
            autoplay={false}
            initialTime={0}
            showFullscreenBtn
            showPlayBtn
            showCenterPlayBtn
          />
          <View className="delete-btn" onClick={deleteVideo}>✕</View>
        </View>
      ) : (
        <View className="upload-btn" onClick={chooseVideo}>
          <Image
            src={Add}
            className="upload-icon"
          />
          {/*<Text className="upload-text">上传视频</Text>*/}
        </View>
      )}
    </View>
  )
}

export default SingleVideoUploader
